<template>
  <div class="component-markdown">
    <div class="spin-group" v-if="!markedHTML">
      <div>正在加载</div>
    </div>
    <div class="markdown-body" v-html="markedHTML"></div>
  </div>
</template>

<script>
import marked from "marked";
import highlight from "highlight.js";
import "github-markdown-css";

export default {
  name: "d2-markdown",
  props: {
    url: {
      type: String,
      required: false,
      default: "",
    },
    source: {
      type: String,
      required: false,
      default: "",
    },
    highlight: {
      type: Boolean,
      required: false,
      default: false,
    },
    // 百度网盘分享链接特殊样式
    baidupan: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      getReadmePublicPath: "",
      markedHTML: "",
    };
  },
  mounted() {
    if (this.url) {
      //   this.initWithUrl();
    } else if (this.source) {
      this.initWithMd();
    } else {
      console.log("not mounted init");
    }
  },
  methods: {
    // 使用 md 初始化
    initWithMd() {
      this.markedHTML = this.marked(this.source);
    },
    marked(data) {
      const renderer = new marked.Renderer();
      return marked(data, {
        ...(this.highlight
          ? { highlight: (code) => highlight.highlightAuto(code).value }
          : {}),
        renderer,
      });
    },
  },
};
</script>

// <style lang="scss">
// // 主色
// $color-primary: #409eff;

// // 辅助色
// $color-info: #909399;
// $color-success: #67c23a;
// $color-warning: #e6a23c;
// $color-danger: #f56c6c;

// // 文字
// $color-text-main: #303133;
// $color-text-normal: #606266;
// $color-text-sub: #909399;
// $color-text-placehoder: #c0c4cc;

// // 边框
// $color-border-1: #dcdfe6;
// $color-border-2: #e4e7ed;
// $color-border-3: #ebeef5;
// $color-border-4: #f2f6fc;

// // 背景
// $color-bg: #f8f8f9;
// .component-markdown {
//   .spin-group {
//     height: 100px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     flex-direction: column;
//     color: $color-primary;
//   }
// }
// // 百度云
// $baidupanHeight: 30px;
// $baidupanPadding: 10px;
// .baidupan {
//   overflow: hidden;
//   margin-bottom: 16px;
//   .container {
//     height: $baidupanHeight + 2 * $baidupanPadding;
//     border-radius: 4px;
//     border: 1px solid #dfe2e5;
//     padding: $baidupanPadding;
//     float: left;
//     cursor: pointer;
//     &:hover {
//       border: 1px solid $color-primary;
//       .line {
//         background-color: $color-primary;
//       }
//     }
//     .icon {
//       float: left;
//       height: $baidupanHeight;
//       text-align: center;
//       width: 40px;
//       margin-right: $baidupanPadding;
//       img {
//         width: 40px;
//       }
//     }
//     .url {
//       float: left;
//       height: $baidupanHeight;
//       line-height: $baidupanHeight;
//       color: $color-text-main;
//     }
//     .line {
//       float: left;
//       height: $baidupanHeight + 2 * $baidupanPadding;
//       width: 1px;
//       margin: -$baidupanPadding $baidupanPadding;
//       background-color: #dfe2e5;
//     }
//     .pwd {
//       float: left;
//       height: $baidupanHeight;
//       line-height: $baidupanHeight;
//     }
//   }
// }
// </style>
